<template>
  <div class="grid-cont">
    <Row :gutter="[24, 24]">
      <Col :span="4" v-for="(item, index) in fileList" :key="index" class="item">
        <div class="item-cont">
          <div class="item-img">
            <Image :src="icons[item.type]" :preview="false" :width="96" :height="78" />
          </div>
          <div class="item-title">
            <span class="item-label">
              <template v-if="item.disabled">{{ item.name }}</template>
              <Input v-model:value="item.name" v-else @blur="(val) => changeBlur(val, index)" />
            </span>
            <span class="item-icon" :ref="iconRefArr" :disabled="item.disabled">
              <Dropdown
                overlayClassName="grid-drop-node"
                :getPopupContainer="()=>(iconRef[index] as HTMLElement)"
                trigger="hover"
              >
                <span class="drop-title">
                  <EllipsisOutlined style="color: #666; font-size: 24px" />
                </span>
                <template #overlay>
                  <Menu @click="(val) => handleMenu(val, index)">
                    <MenuItem v-for="items in sortList" :key="items.id">
                      <div>
                        {{ items.name }}
                      </div>
                    </MenuItem>
                  </Menu>
                </template>
              </Dropdown>
            </span>
          </div>
        </div>
      </Col>
    </Row>
    <!-- <ActionsNav /> -->
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted, nextTick } from 'vue';
  import { Row, Col, Image, Dropdown, Menu, MenuItem, Input } from 'ant-design-vue';
  import { EllipsisOutlined } from '@ant-design/icons-vue';
  import { icons } from '../hooks/index';
  import { useMessage } from '/@/hooks/web/useMessage';
  // import ActionsNav from './actions-nav.vue';

  const { createMessage } = useMessage();

  const sortList = ref([
    { name: '重命名', id: '1' },
    { name: '迁移', id: '2' },
    { name: '勾选', id: '3' },
    { name: '删除', id: '4' },
  ]);

  const fileList = ref([
    { id: 1, name: '微信图片啊啊', disabled: true, type: 'image' },
    { id: 2, name: '压缩包压缩包压缩包压缩包', disabled: true, type: 'file' },
  ]);

  const iconRef = ref<HTMLElement[]>([]);

  // const selectKeys = ref<string[]>([]);

  // 重命名之前的文件名
  let lastName = '';

  const iconRefArr = (el) => {
    if (el && iconRef.value.length < 10) {
      // console.log('%c=====el', 'color:#a8d;font-size:30px;font-weight:bold', el);
      iconRef.value.push(el);
    }
  };

  const handleMenu = ({ key, keyPath }, index: number) => {
    console.log('%cdata=======', 'color:#3ae;font-size:30px;font-weight:bold', key, keyPath);
    switch (key) {
      case '1': //重命名
        lastName = fileList.value[index].name;
        fileList.value[index].disabled = false;
        break;
      case '2': //迁移
        break;
      case '3': //勾选
        break;
      case '4': //删除
        break;
    }
  };

  const changeBlur = (val, index) => {
    console.log('失去焦点了------------', val, index);
    if (!val.target.value.trim().length) {
      createMessage.warning('文件名不能为空');
      fileList.value[index].name = lastName;
      fileList.value[index].disabled = true;
      return;
    }
    /**
     * 校验通过 调用接口修改文件名
     * .....
     * */

    fileList.value[index].disabled = true;
  };

  onMounted(async () => {
    await nextTick();
    console.log(iconRef.value);
  });
</script>

<style lang="less" scoped>
  .grid-cont {
    margin-top: 16px;
    padding: 0 24px;

    .item {
      .item-cont {
        border-radius: 8px;
        border: 1px solid #e9e9e9;
        overflow: hidden;

        &:hover {
          cursor: pointer;
          box-shadow: 0 2px 10px 0 #e9e9e9;

          .item-icon[disabled='true'] {
            width: 30px;

            .item-label {
              width: calc(100% - 30px) !important;
            }

            .drop-title {
              display: block !important;
            }
          }
        }

        .item-img {
          background: #f1f4f7;
          padding: 42px 0;
          text-align: center;
        }

        .item-title {
          padding: 16px;
          font-size: 16px;

          display: flex;
          justify-content: space-between;
          align-items: center;

          .item-label {
            white-space: nowrap;
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 1.8;
          }

          .item-icon {
            // &[disabled='true'] {
            //   width: 30px;
            // }

            .drop-title {
              display: none;
            }

            span.anticon:not(.app-iconify) {
              margin-right: 0;
            }

            :deep(.grid-drop-node) {
              .ant-dropdown-menu {
                padding: 0;
                min-width: 140px;

                .ant-dropdown-menu-item {
                  border-radius: 0;
                  //     .ant-dropdown-menu-item-selected,
                  border-bottom: 1px solid #f5f6f7;

                  &:last-child {
                    border: none;
                  }

                  &.ant-dropdown-menu-item-active {
                    background-color: rgba(43, 99, 161, 0.05);
                    color: @primary-color;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
</style>
